import { useEffect, useState } from "react";
const App = () => {

  const [msg, setMsg] = useState(10);
  const [a] = useState('a')

  //初次渲染时会执行一次。每次数据变化都会执行，相当于componentDidUpdate
  // useEffect(() => {
  //   console.log('数据变化了')
  // })

  //只会在初次渲染时执行一次，相当于componentDidMount
  // useEffect(() => {
  //   console.log(msg)
  // }, [])

  //初次渲染时会执行一次。当前所依赖的数据发生变化时才会执行，相当于一个侦听器
  useEffect(() => {
    console.log('msg变化了')
  }, [msg, a])

  const clickBtn = () => {
    setMsg(msg + 1)
  }

  return (
    <>
      <h1>{msg}</h1>
      <button onClick={clickBtn}>更改msg</button>
    </>
  )
}

export default App;